<template>
	<view class="order-container page-container">
		<!-- 顶部统计 -->
		<view class="stats-section">
			<view class="stat-item" @click="settingFilter('status', '0')">
				<text class="stat-number">{{ stats.totalOrders }}</text>
				<text class="stat-label">总订单</text>
			</view>
			<view class="stat-item" @click="settingFilter('status', '1')">
				<text class="stat-number">{{ stats.pendingPayment }}</text>
				<text class="stat-label">待付款</text>
			</view>
			<view class="stat-item" @click="settingFilter('status', '2')">
				<text class="stat-number">{{ stats.pendingShipment }}</text>
				<text class="stat-label">待发货</text>
			</view>
			<view class="stat-item" @click="settingFilter('status', '3')">
				<text class="stat-number">{{ stats.shipped }}</text>
				<text class="stat-label">已发货</text>
			</view>
			<view class="stat-item" @click="settingFilter('status', '4')">
				<text class="stat-number">{{ stats.completed }}</text>
				<text class="stat-label">已完成</text>
			</view>
		</view>

		<!-- 搜索和筛选 -->
		<view class="search-filter-section">
			<view class="search-box">
				<input type="text" v-model="searchKeyword" placeholder="搜索订单号、商品名称" class="search-input" />
				<text class="search-icon" style="z-index: 9;" @click="onSearch">🔍</text>
			</view>
			<view class="filter-btn" @click="openFilterPopup">
				<text class="filter-text">筛选</text>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-item" v-for="order in orders" :key="order.id" @click="toOrderDetail(order)">
				<view class="order-header">
					<view class="order-info">
						<view class="order-number-row">
							<text class="order-number">订单号：{{ order.order_no }}</text>
							<view class="order-type type-normal">
								<text class="type-text">{{ getTypeText(order.receive_type) }}</text>
							</view>
						</view>
						<text class="order-time">{{ order.create_time }}</text>
					</view>
					<view class="order-status" :class="'status-' + getStatusText(order.order_status)">
						<text class="status-text">{{ order.order_status_desc }}</text>
					</view>
				</view>

				<view class="order-content">
					<view class="customer-info">
						<text class="customer-name">{{ order.receiver_name }}</text>
						<text class="customer-phone">{{ order.receiver_phone_hidden }}</text>
					</view>

					<view class="product-list">
						<view class="product-item" v-for="product in order.products" :key="product.id">
							<image :src="$tools.buildUrl(product.main_image)" mode="aspectFill" class="product-image">
							</image>
							<view class="product-details">
								<text class="product-name">{{ product.spu_name }}</text>
								<text class="product-spec">{{ product.sku_name }}</text>
								<view class="product-price-qty">
									<!-- 普通订单显示价格 -->
									<text class="product-price">¥{{ product.actual_price }}</text>
									<!-- 积分订单显示积分价格 -->
									<!-- <text class="product-price points-price"
										v-if="order.type === 'points' && order.paymentMethod === 'points'">{{ product.pointsPrice }}积分</text> -->
									<!-- 积分卡订单显示积分卡价格 -->
									<!-- <text class="product-price card-price"
										v-if="order.type === 'points' && order.paymentMethod === 'pointsCard'">{{ product.cardPrice }}</text> -->
									<!-- 购买数量 -->
									<text class="product-qty">×{{ product.quantity }}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="order-summary">
						<!-- 普通订单显示金额 -->
						<template>
							<view class="summary-row">
								<text class="summary-label">商品总额：</text>
								<text class="summary-value">¥{{ order.goods_amount }}</text>
							</view>
							<view class="summary-row" v-if="order.post_amount > 0">
								<text class="summary-label">运费：</text>
								<text class="summary-value">¥{{ order.post_amount }}</text>
							</view>
							<view class="summary-row" v-if="order.shop_cost_amount > 0">
								<text class="summary-label">优惠：</text>
								<text class="summary-value">¥{{ order.shop_cost_amount }}</text>
							</view>
							<view class="summary-row total">
								<text class="summary-label">订单金额：</text>
								<text class="summary-value total-amount">¥{{ order.pay_amount }}</text>
							</view>
						</template>

						<!-- 积分兑换订单显示积分或积分卡 -->
						<template v-if="order.type === 'points'">
							<!-- 积分支付 -->
							<view class="summary-row" v-if="order.paymentMethod === 'points'">
								<text class="summary-label">消耗积分：</text>
								<text class="summary-value points-value">{{ order.pointsUsed }}积分</text>
							</view>
							<!-- 积分卡支付 -->
							<view class="summary-row" v-if="order.paymentMethod === 'pointsCard'">
								<text class="summary-label">积分卡：</text>
								<text class="summary-value card-value">{{ order.pointsCardUsed }}</text>
							</view>
							<view class="summary-row" v-if="order.shippingFee > 0">
								<text class="summary-label">运费：</text>
								<text class="summary-value">¥{{ order.shippingFee }}</text>
							</view>
							<view class="summary-row" v-if="order.totalAmount > 0">
								<text class="summary-label">总计：</text>
								<text class="summary-value total-amount">¥{{ order.totalAmount }}</text>
							</view>
						</template>
					</view>
				</view>

				<view class="order-actions">
					<button v-if="order.order_status >=2 && order.order_status!==6 && order.receive_type===1"
						class="action-btn primary" @click.stop="handleOrder(order)">
						{{ getActionText(order.order_status) }}
					</button>
					<button class="action-btn detail-btn" @click.stop="toOrderDetail(order)">
						查看详情
					</button>
				</view>
			</view>
		</view>

		<!-- 筛选弹窗 -->
		<u-popup :show="showFilterPopup" @close="closeFilterPopup" mode="bottom" :round="20">
			<view class="filter-popup">
				<view class="popup-header">
					<text class="popup-title">筛选订单</text>
					<text class="popup-close" @click="closeFilterPopup">✕</text>
				</view>

				<view class="filter-content">
					<view class="filter-section">
						<text class="filter-title">订单状态</text>
						<view class="filter-options">
							<view class="filter-option" v-for="(option, index) in statusOptions" :key="index"
								:class="{ active: currentFilter.status === option.value }"
								@click="selectFilter('status', option.value)">
								<text class="option-text">{{ option.label }}</text>
							</view>
						</view>
					</view>

					<view class="filter-section">
						<text class="filter-title">订单类型</text>
						<view class="filter-options">
							<view class="filter-option" v-for="(option, index) in typeOptions" :key="index"
								:class="{ active: currentFilter.type === option.value }"
								@click="selectFilter('type', option.value)">
								<text class="option-text">{{ option.label }}</text>
							</view>
						</view>
					</view>

					<view class="filter-section">
						<text class="filter-title">时间范围</text>
						<view class="filter-options">
							<view class="filter-option" v-for="(option, index) in timeOptions" :key="index"
								:class="{ active: currentFilter.time === option.value }"
								@click="selectFilter('time', option.value)">
								<text class="option-text">{{ option.label }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="filter-actions">
					<button class="reset-btn" @click="resetFilter">重置</button>
					<button class="confirm-btn" @click="applyFilter">确定</button>
				</view>
			</view>
		</u-popup>

		<!-- 发货弹窗 -->
		<u-popup :show="showDeliveryPopup" @close="closeDeliveryPopup" mode="bottom" :round="20">
			<view class="filter-popup">
				<view class="popup-header">
					<text class="popup-title">订单发货：{{shippingOrder.order_no}}</text>
					<text class="popup-close" @click="closeDeliveryPopup">✕</text>
				</view>

				<view class="filter-content">
					<view class="filter-section">
						<text class="filter-title">收货人</text>
						<view class="filter-options option-text">
							{{shippingOrder.receiver_name}} {{shippingOrder.receiver_phone_hidden}}
						</view>
						<view class="filter-options option-text">
							{{shippingOrder.pcas}} {{$secret.decryptAES(shippingOrder.receiver_address)}}
						</view>
					</view>
					<!-- 选择物流 -->
					<view class="filter-section">
						<text class="filter-title">选择物流</text>
						<view class="filter-options">
							<view class="filter-option" v-for="(option, index) in logisticsOptions" :key="index"
								:class="{ active: selectedLogistics === index }" @click="selectedLogistics=index">
								<text class="option-text">{{ option.lc_name }}</text>
							</view>
						</view>
					</view>
					<view class="filter-section">
						<text class="filter-title">快递单号
							<text class="change-btn" @click="scanTrackingNo">点击扫码</text>
						</text>
						<view class="filter-options">
							<view class="form-item">
								<input class="form-input" placeholder="请扫描快递单号" v-model="track_no" />
							</view>
						</view>
					</view>
				</view>

				<view class="filter-actions">
					<button class="reset-btn" @click="closeDeliveryPopup">取消</button>
					<button class="confirm-btn" @click="confirmShipping">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				orders: [], // 订单列表
				showFilterPopup: false,
				// 统计数据
				stats: {
					totalOrders: 0,
					pendingPayment: 0,
					pendingShipment: 0,
					shipped: 0,
					completed: 0
				},
				// 筛选条件
				currentFilter: {
					status: '0',
					type: '0',
					time: 'all'
				},
				// 筛选选项
				statusOptions: [{
						label: '全部状态',
						value: '0'
					},
					{
						label: '待付款',
						value: '1'
					},
					{
						label: '待发货',
						value: '2'
					},
					{
						label: '已发货',
						value: '3'
					},
					{
						label: '已完成',
						value: '4'
					},
					{
						label: '已取消',
						value: '5'
					}
				],
				typeOptions: [{
						label: '全部类型',
						value: '0'
					},
					{
						label: '快递配送',
						value: '1'
					},
					{
						label: '用户自提',
						value: '2'
					}
				],
				timeOptions: [{
						label: '全部时间',
						value: 'all'
					},
					{
						label: '今天',
						value: 'today'
					},
					{
						label: '最近7天',
						value: 'week'
					},
					{
						label: '最近30天',
						value: 'month'
					}
				],
				logisticsOptions: [],
				selectedLogistics: -1,
				showDeliveryPopup: false,
				track_no: '',
				shippingOrder: {}
			}
		},

		onLoad(options) {
			if (options.q) {
				this.searchKeyword = decodeURIComponent(options.q)
			}
			this.onSearch()
			this.loadDataState()
			this.loadLogisticsCompany()
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.orders = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},

		methods: {
			onSearch() {
				this.page = 1
				this.recordCount = 0
				this.orders = []
				this.loadDataList()
				this.loadDataState()
			},
			loadDataList() {
				if (this.hasSearched) {
					return false
				}
				this.hasSearched = true
				this.$api.agent.GetAgentOrderList({
					page: this.page,
					limit: this.limit,
					keyword: this.searchKeyword,
					status: this.currentFilter.status,
					type: this.currentFilter.type,
					time: this.currentFilter.time,
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					this.orders = this.orders.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},

			loadDataState() {
				this.$api.agent.GetAgentOrderTJ().then(res => {
					this.stats = res.data
				})
			},

			// 获取状态标识
			getStatusText(status) {
				// 订单状态：0-待确认/待支付（订单创建完毕）2-已支付 3-备货中 4-部分发货 5-已发货（全部发货）6-已取消 7-已完成（已收货）
				const statusMap = {
					0: 'pending',
					2: 'paid',
					5: 'shipped',
					7: 'completed',
					6: 'cancelled'
				}
				return statusMap[status] || 'default'
			},

			// 获取订单类型文本
			getTypeText(type) {
				const typeMap = {
					'1': '快递配送',
					'2': '用户自提'
				}
				return typeMap[type] || type
			},

			// 获取操作按钮文本
			getActionText(status) {
				const textMap = {
					'2': '立即发货',
					'3': '立即发货',
					'4': '立即发货',
					'5': '查看物流',
					'7': '查看物流',
				}
				return textMap[status] || '查看物流'
			},

			// 跳转到订单详情
			toOrderDetail(order) {
				uni.navigateTo({
					url: `/dealer-package/order/detail?id=${order.id}`
				})
			},

			// 加载物流公司
			loadLogisticsCompany() {
				this.$api.order.GetLogisticsCompany().then(res => {
					this.logisticsOptions = res.data
				})
			},

			// 选择物流公司
			selectLogistics(index) {
				this.selectedLogistics = index
			},

			// 扫码快递单号
			scanTrackingNo() {
				uni.authorize({
					scope: 'scope.camera', // 申请相机权限
					success: () => {
						// 授权成功后调用扫码
						uni.scanCode({
							onlyFromCamera: false,
							scanType: ['qrCode', 'barCode'],
							success: (res) => {
								// console.log('扫码结果:', res);
								if (res.result && res.result != '') {
									this.track_no = res.result;
								}
							},
							fail: (err) => {
								// console.error('扫码失败:', err);
								uni.showToast({
									title: '扫码失败，请重试',
									icon: 'none'
								})
							}
						});
					},
					fail: () => {
						uni.showToast({
							title: "请授权相机权限"
						});
					}
				});
			},

			// 处理订单
			handleOrder(order) {
				if ([2, 3, 4].includes(order.order_status)) {
					this.shippingOrder = order
					this.showDeliveryPopup = true
				} else if ([5, 7].includes(order.order_status)) {
					this.viewLogistics(order)
				}
			},

			// 确认发货
			confirmShipping() {
				if (!(this.shippingOrder && this.shippingOrder.id > 0)) {
					uni.showToast({
						title: '请选择要发货的订单',
						icon: 'none'
					})
					return
				}
				if (this.selectedLogistics < 0) {
					uni.showToast({
						title: '请填写物流公司',
						icon: 'none'
					})
					return
				}
				if (!this.track_no.trim()) {
					uni.showToast({
						title: '请填写快递单号',
						icon: 'none'
					})
					return
				}
				let lc_code = '';
				let lc_name = '';
				if (this.logisticsOptions.length > 0) {
					lc_code = this.logisticsOptions[this.selectedLogistics].lc_code
					lc_name = this.logisticsOptions[this.selectedLogistics].lc_name
				}
				const order = this.shippingOrder
				// 更新订单状态
				let totalweight = order.products.reduce((accumulator, currentValue) => {
					return accumulator + currentValue.weight;
				}, 0);
				let totalvolume = order.products.reduce((accumulator, currentValue) => {
					return accumulator + currentValue.volume;
				}, 0);
				const products = order.products.filter(item => item.logistics_status === 0)
				if (!(products && products.length > 0)) {
					uni.showToast({
						title: '订单商品已发货，当下没有可发货的商品',
						icon: 'none'
					})
					return
				}
				const product_info = products.map(o => o.id)
				this.$api.agent.DeliveryOrders({
					id: order.id,
					track_no: this.track_no,
					lc_code: lc_code,
					lc_name: lc_name,
					weight: totalweight,
					volume: totalvolume,
					products: order.products,
					product_info: product_info,
				}).then(res => {
					this.showDeliveryPopup = false
					this.setOrderStatus(res.data)
					this.loadDataState()
					uni.showToast({
						title: '发货确认成功',
						icon: 'success'
					})
				})
			},

			// 查看物流
			viewLogistics(order) {
				const wlitem = order.products.find(product => product.logistics_pack_id > 0)
				if (wlitem) {
					uni.navigateTo({
						url: `/pages/order/logistics?orderId=${order.id}&logistics_id=${wlitem.logistics_pack_id}`
					})
				}
			},

			// 打开筛选弹窗
			openFilterPopup() {
				this.showFilterPopup = true
			},

			// 选择筛选条件
			selectFilter(type, value) {
				this.currentFilter[type] = value
			},

			// 重置筛选
			resetFilter() {
				this.currentFilter = {
					status: '0',
					type: '0',
					time: 'all'
				}
			},

			// 选择筛选条件
			settingFilter(type, value) {
				this.currentFilter = {
					status: '0',
					type: '0',
					time: 'all'
				}
				this.currentFilter[type] = value
				this.onSearch()
			},

			// 关闭筛选弹窗
			closeFilterPopup() {
				this.showFilterPopup = false
			},

			// 应用筛选
			applyFilter() {
				this.closeFilterPopup()
				this.onSearch()
			},

			// 关闭发货弹窗
			closeDeliveryPopup() {
				this.showDeliveryPopup = false
				this.shippingOrder = {}
			},

			setOrderStatus(order) {
				const index = this.orders.findIndex(o => o.id === order.id)
				if (index >= 0) {
					this.$set(this.orders, index, order)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	/* 顶部统计 */
	.stats-section {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.stat-item {
		text-align: center;
		flex: 1;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: 700;
		color: #52a58a;
		display: block;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
		display: block;
	}

	/* 搜索和筛选 */
	.search-filter-section {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.search-box {
		flex: 1;
		position: relative;
	}

	.search-input {
		height: 80rpx;
		background-color: white;
		border-radius: 40rpx;
		padding: 0 50rpx 0 30rpx;
		font-size: 28rpx;
		color: #333;
		border: 2rpx solid transparent;
	}

	.search-input:focus {
		border-color: #52a58a;
	}

	.search-icon {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 32rpx;
		color: #999;
	}

	.filter-btn {
		width: 120rpx;
		height: 80rpx;
		background-color: white;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}

	.filter-text {
		font-size: 28rpx;
		color: #333;
	}

	.filter-icon {
		font-size: 24rpx;
	}

	/* 订单列表 */
	.order-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.order-item {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.order-info {
		flex: 1;
	}

	.order-number-row {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 8rpx;
	}

	.order-number {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}

	.order-type {
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		font-size: 20rpx;
	}

	.type-normal {
		background-color: #e3f2fd;
		color: #1976d2;
	}

	.type-points {
		background-color: #fff3e0;
		color: #f57c00;
	}

	.type-text {
		font-size: 20rpx;
	}

	.order-time {
		font-size: 24rpx;
		color: #666;
		display: block;
	}

	.order-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.status-pending_payment {
		background-color: #fff3cd;
		color: #856404;
	}

	.status-pending_shipment {
		background-color: #d1ecf1;
		color: #0c5460;
	}

	.status-shipped {
		background-color: #cce5ff;
		color: #004085;
	}

	.status-completed {
		background-color: #d4edda;
		color: #155724;
	}

	.status-cancelled {
		background-color: #f8d7da;
		color: #721c24;
	}

	.order-content {
		margin-bottom: 20rpx;
	}

	.customer-info {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
	}

	.customer-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}

	.customer-phone {
		font-size: 26rpx;
		color: #666;
	}

	.product-list {
		margin-bottom: 20rpx;
	}

	.product-item {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.product-item:last-child {
		margin-bottom: 0;
	}

	.product-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.product-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 8rpx;
		line-height: 1.4;
	}

	.product-spec {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 12rpx;
	}

	.product-price-qty {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		font-size: 28rpx;
		font-weight: 600;
		color: #52a58a;
	}

	.points-price {
		color: #f57c00 !important;
	}

	.card-price {
		color: #9c27b0 !important;
	}

	.product-qty {
		font-size: 26rpx;
		color: #666;
	}

	.order-summary {
		border-top: 1rpx solid #f0f0f0;
		padding-top: 20rpx;
	}

	.summary-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.summary-row:last-child {
		margin-bottom: 0;
	}

	.summary-row.total {
		border-top: 1rpx solid #f0f0f0;
		padding-top: 12rpx;
		margin-top: 12rpx;
	}

	.summary-label {
		font-size: 26rpx;
		color: #666;
	}

	.summary-value {
		font-size: 26rpx;
		color: #333;
	}

	.total-amount {
		font-size: 32rpx;
		font-weight: 700;
		color: #52a58a;
	}

	.points-value {
		font-size: 28rpx;
		font-weight: 600;
		color: #f57c00;
	}

	.card-value {
		font-size: 28rpx;
		font-weight: 600;
		color: #9c27b0;
	}

	.order-actions {
		display: flex;
		gap: 20rpx;
		justify-content: flex-end;
	}

	.action-btn {
		padding: 0rpx 32rpx;
		border-radius: 40rpx;
		font-size: 26rpx;
		border: none;
	}

	.action-btn.secondary {
		background-color: #f8f9fa;
		color: #666;
	}

	.action-btn.primary {
		background-color: #52a58a;
		color: white;
	}

	.detail-btn {
		background-color: transparent;
		color: #666;
		border: 1rpx solid #ddd;
	}

	/* 筛选弹窗 */
	.filter-popup {
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		max-height: 80vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.popup-close {
		font-size: 36rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.filter-content {
		flex: 1;
		padding: 30rpx;
		overflow-y: auto;
	}

	.filter-section {
		margin-bottom: 40rpx;
	}

	.filter-section:last-child {
		margin-bottom: 0;
	}

	.filter-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.filter-options {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.filter-option {
		padding: 16rpx 24rpx;
		background-color: #f8f9fa;
		border-radius: 40rpx;
		border: 2rpx solid transparent;
	}

	.filter-option.active {
		background-color: #e8f5f0;
		border-color: #52a58a;
	}

	.option-text {
		font-size: 26rpx;
		color: #666;
	}

	.filter-option.active .option-text {
		color: #52a58a;
		font-weight: 600;
	}

	.filter-actions {
		display: flex;
		gap: 20rpx;
		padding: 30rpx;
		background-color: #f8f9fa;
		border-top: 1rpx solid #f0f0f0;
	}

	.reset-btn,
	.confirm-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		border: none;
	}

	.reset-btn {
		background-color: white;
		color: #666;
		border: 2rpx solid #e0e0e0;
	}

	.confirm-btn {
		background-color: #52a58a;
		color: white;
	}

	/* 表单区域 */
	.form-section {
		background: white;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.form-item {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.form-input {
		flex: 1;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		font-size: 28rpx;
		border: 1rpx solid #e9ecef;
	}

	.change-btn {
		font-size: 32rpx;
		color: #52a58a;
		font-weight: normal;
		float: right;
	}
</style>